<ion-list class="margin-bottom ion-no-padding">
  <ion-item
    *ngFor="let contact of contactsService.contacts"
    class="ion-activatable"
  >
    <ion-avatar slot="start">
      <img [src]="contact?.contactAvatar" />
      <ion-ripple-effect></ion-ripple-effect>
    </ion-avatar>
    <ion-label class="ion-text-wrap">
      <h2 class="text-height">
        <strong>{{ contact?.contactName }}</strong>
      </h2>
      <p class="text-height">{{ contact?.time | date: "medium" }}</p>
    </ion-label>
    <ion-button slot="end" fill="clear">
      <ion-icon slot="icon-only" color="primary" name="call-sharp"></ion-icon>
    </ion-button>
    <ion-ripple-effect></ion-ripple-effect>
  </ion-item>
</ion-list>

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
  <ion-fab-button color="secondary">
    <ion-icon color="light" name="call"></ion-icon>
  </ion-fab-button>
</ion-fab>
